<template>
  <div class="help">
    <!-- 顶部导航栏 -->
    <div id="div_box_nav">
      <van-sticky>
        <van-nav-bar title="收益" />
      </van-sticky>
    </div>

    <!-- 标签页导航栏 -->
    <div>
      <van-tabs v-model="active" sticky>
        <van-tab title="全部">
          <!-- 商品内容 -->
          <van-card v-for="list in orderData" :key="list.id"
          @click="toDetails(list)">
            <!-- 订单标题 -->
            <template #title>
              <div style="font-size: 20px">{{ list.customer.username }}</div>
            </template>
            <!-- 顾客头像 -->
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                fit="cover"
                :src="list.customer.userFace"
              />
            </template>
            <!-- 订单状态标签 -->
            <template #tags>
              <van-tag
                style="position: relative; left: 80%; bottom: 50px"
                plain
                type="danger"
                >{{ list.status }}</van-tag
              >
            </template>
            <!-- 订单地址 -->
            <template #desc>
              <div style="position: relative; top: 10px">
                {{ list.address.province }}{{ list.address.city
                }}{{ list.address.area }}{{ list.address.address }}
              </div>
              <div style="position: relative; top: 20px">
                {{ list.orderTime | dateFormat }}
              </div>
            </template>
            <!-- 订单价格 -->
            <template #num>
              <div
                style="
                  font-size: 15px;
                  position: relative;
                  right: 40%;
                  bottom: 5px;
                "
              >
                ￥{{ list.total }}
              </div>
            </template>
          </van-card>
          <div style="height: 80px"></div>
        </van-tab>
        <!-- 提现内容 -->
        <van-tab title="提现">
          <van-card
            v-for="list in AccountApplyData"
            :key="list.id"
            class="orderCard"
          >
            <!-- 提现标题 -->
            <template #title>
              <div class="wenzi" style="font-size: 15px">提现——到银行卡</div>
            </template>
            <!-- 申请状态 -->
            <template #num>
              <van-tag
                id="bq"
                class="btg"
                v-if="list.status == '不通过'"
                plain
                type="danger"
                >{{ list.status }}</van-tag
              >
              <van-tag
                id="bq"
                v-else-if="list.status == '通过'"
                plain
                type="success"
                >{{ list.status }}</van-tag
              >
              <van-tag
                id="bq"
                class="wsh"
                v-else-if="list.status == '未审核'"
                plain
                >{{ list.status }}</van-tag
              >
            </template>
            <!-- 申请时间 -->
            <template #desc>
              <div class="orderTime" style="position: relative; top: 40px">
                {{ list.applyTime | dateFormat }}
              </div>
            </template>
            <template #tags>
              <van-tag class="orderMoney"> ￥{{ list.money }} </van-tag>
            </template>
          </van-card>
          <div style="height: 80px"></div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
// 引入axios
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      active: "",
      // 员工ID
      employeeId: "",
      // 订单相关数据
      orderData: [],
      // 账户申请数据
      AccountApplyData: [],
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入category vuex中的方法
    ...mapActions("user", ["getUserInfo"]),
    // 请求订单相关信息
    async queryOrder() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "已完成",
        employeeId: this.employeeId,
      };
      let res = await get("/order/pageQuery", data);
      this.orderData = res.data.data.list;
    },

    // 请求提现信息
    async queryAccountApply() {
      let data = {
        page: 1,
        pageSize: 100,
        applyType: "提现",
        userId: this.employeeId,
      };
      let res = await get("/accountApply/pageQueryAccountApply", data);
      this.AccountApplyData = res.data.data.list;
    },
    //跳转订单详情页面
      toDetails(orderData) {
        this.$router.push({
        path: '/manager/Details',
        query: {
          orderData: orderData
        }
      })
      },
  },
  created() {
    // 自动获取用户信息
    this.getUserInfo().then((r) => {
      this.employeeId = this.userInfo.id;
      // 自动获取提现信息
      this.queryAccountApply();
      // 自动获取订单信息
      this.queryOrder();
    });
  },
};
</script>

<style scoped>
.wenzi {
  position: relative;
  left: 15px;
  top: 10px;
}
.orderTime {
  position: relative;
  left: 15px;
  font-size: 16px;
}
.van-nav-bar {
  background-image: linear-gradient(to right, #fc00ff, #00dbde);
}
.help /deep/ .van-nav-bar__title {
  color: white;
}

#bq {
  font-size: 16px;
  position: relative;
  right: 40%;
  bottom: 12px;
  padding: 3px 5px;
}
.btg {
  position: relative;
  right: 15% !important;
  bottom: 12px;
}
.wsh {
  position: relative;
  right: 15% !important;
  bottom: 12px;
}
.orderCard {
  position: relative;
}
.orderMoney {
  position: absolute;
  top: 10px;
  right: 15px;
  background-color: #fff;
  color: rgb(255, 118, 38);
  font-size: 18px;
  background-color: #f5f5f5;
}
.van-card {
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(to right, #f7f7f7, #f5f5f5);
  border-radius: 10px;
  padding: 10px;
  margin: 15px;
}
</style>